<!DOCTYPE html>  
<html>  
<head>  
    <title>登录页面</title> 
    <meta charset="utf8"> 
    <style>  
    table{
        border: solid 0px gray;
        border-collapse: collapse;
        margin: auto;
    }
    </style>  
</head>  
<body>  

    
    <form action="/articles-demo1-php/php/login.php" method="post">  
         <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" id="username" name="username" required>  </td>
            </tr>
            <tr>
                <td>密码</td>
                <td> <input type="password" id="passwd" name="passwd"  required>  </td> 
           </tr>
           <tr>
                <td>图形验证码</td>
                <td> 
                <input type="text" id="captcha" name="captcha"  required>  
                </td> 
            </tr>   
            
            <tr>
                <td></td>
                <td>                
                    <img id="imgsrc" src="http://localhost/articles-demo1-php/php/captcha.php" 
                    width="80px" height="30px" onclick="refreshCaptcha()">
                </td>
  
            </tr>
     
            <tr>
                <td></td>
                <td><input type="submit" value="登录"> </td>
            </tr>
             
        </table>
    </form>  
</body>  

<script>
  
    function refreshCaptcha(event) {  
        var img = document.getElementById('imgsrc');  
        img.src = 'http://localhost/articles-demo1-php/php/captcha.php?random=' + Math.random(); // 添加随机参数以确保每次都获取新的图片  
    }  
</script>
</script>
</html>